<template>
  <a-modal
    :title="`签名${model && model.id > 0 ? '编辑' : '新增'}`"
    :width="640"
    :visible="visible"
    :confirmLoading="loading"
    @ok="
      () => {
        $emit('ok')
      }
    "
    @cancel="
      () => {
        $emit('cancel')
      }
    "
  >
    <a-spin :spinning="loading">
      <a-form :form="form" :labelCol="{ sm: { span: 6 } }" :wrapperCol="{ sm: { span: 18 } }" :selfUpdate="true">
        <!-- 检查是否有 id 并且大于0，大于0是修改。其他是新增，新增不显示主键ID -->
        <a-form-item v-show="model && model.id > 0" label="ID">
          <a-input v-decorator="['id', { initialValue: 0 }]" disabled />
        </a-form-item>
        <a-form-item label="签名">
          <a-input
            v-decorator="['name', { rules: [{ required: true, message: '签名不能为空' }] }]"
            placeholder="请输入签名"
          />
        </a-form-item>
        <!-- <a-form-item label="签名">
          <a-input
            v-decorator="['signature', { rules: [{ required: true, message: '签名名称不能为空' }] }]"
            placeholder="请输入签名"
          />
        </a-form-item> -->
        <a-form-item label="签名用途">
          <a-radio-group
            v-decorator="['signType', { rules: [{ required: true, message: '签名用途不能为空' }], initialValue: 1 }]"
            @change="onChangeSignType"
          >
            <div><a-radio :value="1"> 企业使用，签名用于自有产品 </a-radio></div>
            <div><a-radio :value="2"> 企业使用，签名用于非自有产品 </a-radio></div>
            <div><a-radio :value="3"> 个人使用 </a-radio></div>
          </a-radio-group>
        </a-form-item>
        <a-form-item label="类型">
          <a-select
            v-decorator="['type', { rules: [{ required: true, message: '类型不能为空' }] }]"
            placeholder="请选择类型"
          >
            <a-select-option v-for="it in templateTypeList" :key="it.id" :value="it.id">{{ it.name }}</a-select-option>
          </a-select>
        </a-form-item>
        
        
        <a-form-item label="产品">
          <AWM-select
            v-decorator="['productId', { rules: [{ required: true, message: '产品不能为空' }] }]"
            placeholder="请输入选择产品"
            :addition="{ isInland: isInternational }"
            funStr="productByNoAuth"
          ></AWM-select>
        </a-form-item>
        <a-form-item label="平台">
          <AWM-select
            v-decorator="['platformId', { rules: [{ required: true, message: '平台不能为空' }] }]"
            placeholder="请输入平台产品"
            funStr="platformByNoAuth"
          ></AWM-select>
          <!-- :addition="{ isInland: isInternational }" -->
        </a-form-item>
        <a-form-item :label="`${fileText.licenseFile}`">
          <a-upload
            name="avatar"
            list-type="picture-card"
            class="avatar-uploader"
            :show-upload-list="false"
            action=""
            v-decorator="['licenseFile', { rules: [{ required: true, message: `${fileText.licenseFile}不能为空` }] }]"
            :customRequest="(file) => handleChangeAttr(file, 'licenseFile')"
          >
            <img v-if="licenseFile.file" :src="`${baseUrl + licenseFile.file}`" alt="avatar" class="upload-img" />
            <div v-else>
              <a-icon :type="licenseFile.loading ? 'loading' : 'plus'" />
              <div class="ant-upload-text">上传</div>
            </div>
          </a-upload>
        </a-form-item>
        <a-form-item :label="`${fileText.mandateLicenseFile}`">
          <a-upload
            name="avatar"
            list-type="picture-card"
            class="avatar-uploader"
            :show-upload-list="false"
            action="/"
            v-decorator="['mandateLicenseFile']"
            :customRequest="(file) => handleChangeAttr(file, 'mandateLicenseFile')"
          >
            <img
              v-if="mandateLicenseFile.file"
              :src="`${baseUrl + mandateLicenseFile.file}`"
              alt="avatar"
              class="upload-img"
            />
            <div v-else>
              <a-icon :type="mandateLicenseFile.loading ? 'loading' : 'plus'" />
              <div class="ant-upload-text">上传</div>
            </div>
          </a-upload>
        </a-form-item>
        <a-form-item :label="`授权文件`">
          <a-upload
            name="avatar"
            list-type="picture-card"
            class="avatar-uploader"
            :show-upload-list="false"
            action="/"
            v-decorator="['mandateFile']"
            :customRequest="(file) => handleChangeAttr(file, 'mandateFile')"
          >
            <img v-if="mandateFile.file" :src="`${baseUrl + mandateFile.file}`" alt="avatar" class="upload-img" />
            <div v-else>
              <a-icon :type="mandateFile.loading ? 'loading' : 'plus'" />
              <div class="ant-upload-text">上传</div>
            </div>
          </a-upload>
        </a-form-item>
        <a-form-item label="状态">
          <a-select
            v-decorator="['status', { rules: [{ required: true, message: '状态不能为空' }] }]"
            placeholder="请选择状态"
          >
            <a-select-option v-for="it in signatureStatusList" :key="it.id" :value="it.id">{{ it.name }}</a-select-option>
          </a-select>
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import pick from 'lodash.pick'
import cloneDeep from 'lodash.clonedeep'
import { uploadForQiniu } from '@/utils/qiniu'
import AWMSelect from '@/components/AWMSelect'
import { mapGetters } from 'vuex'
import { templateTypeList, signatureStatusList } from '@/utils/other'
// 表单字段
const fields = ['licenseFile', 'name', 'productId', 'signType', 'type', 'mandateFile', 'mandateLicenseFile', 'id', 'status', 'platformId']

export default {
  props: {
    visible: {
      type: Boolean,
      required: true,
    },
    loading: {
      type: Boolean,
      default: () => false,
    },
    model: {
      type: Object,
      default: () => null,
    },
  },
  data() {
    return {
      form: this.$form.createForm(this),
      city: '',
      inviteUserList: [],
      timeout: null,
      fetching: false,
      projectType: [],
      signValue: 1,
      templateTypeList,
      signatureStatusList,
      mandateFile: {
        file: '',
        loading: false,
      }, //授权文件
      mandateLicenseFile: {
        file: '',
        loading: false,
      }, // 授权单位营业执照/个人身份证反面
      licenseFile: {
        file: '',
        loading: false,
      },
    }
  },
  components: {
    AWMSelect,
  },
  created() {
    // 防止表单未注册
    fields.forEach((v) => this.form.getFieldDecorator(v))

    // 当 model 发生改变时，为表单设置值
    this.$watch('model', (n) => {
      //   this.form.setFieldsValue(pick(this.model, fields))
      if (n) {
        let data = pick(n, fields)
        this.form.setFieldsValue(data)
        this.mandateFile.file = data.mandateFile
        this.mandateLicenseFile.file = data.mandateLicenseFile
        this.licenseFile.file = data.licenseFile
      }
    })
  },
  methods: {
    onChangeSignType(a_value) {
      console.log(a_value.target.value)
      this.signValue = a_value.target.value
    },
    handleChangeAttr(a_files, a_str) {
      console.log(a_files, a_str)
      let self = this
      function successCB(res) {
        console.log('successCB', res)
        self[a_str].loading = false
        self[a_str].file = res.key
      }
      function complateCB(res) {
        console.log('complateCB', res)
      }
      function errorCB(err) {
        self[a_str].loading = false
      }
      console.log(2222)
      uploadForQiniu(a_files.file, successCB, complateCB, errorCB).then((res) => {
        self[a_str].loading = true
      })
    },
  },
  computed: {
    ...mapGetters({ baseUrl: 'baseUrl', platformTemplateItem: 'platformTemplateItem' }),
    fileText: function () {
      let self = this
      // mandateFile: '',   //授权文件
      // mandateLicenseFile: '', // 授权单位营业执照/个人身份证反面
      // licenseFile : '',       // 营业执照/个人身份证正面
      const signValue = this.signValue
      if (signValue == 3) {
        return {
          mandateLicenseFile: '个人身份证反面', // 授权单位营业执照/
          licenseFile: '个人身份证正面', // 营业执照/
          mandateFile: '其他证明信息'
          
        }
      } else if(signValue == 2) {
        return {
          mandateLicenseFile: '授权单位营业执照', // /
          licenseFile: '营业执照', // /
          mandateFile: '授权文件'
        }
      }else{
        return {
          mandateLicenseFile: '授权单位营业执照', // /
          licenseFile: '营业执照', // /
          mandateFile: '其他证明信息'
        }
      }
    },
  },
  watch: {},
}
</script>
<style scoped lang="less">
.avatar-uploader{
    width: 150px;
    height: 150px;
    img{
        max-width: 134px;
    max-height: 134px;
    }
}

</style>
